<template>
  <view class="page-content" style="padding-bottom: 30rpx;">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="title">{{ customerName }} - 跟进记录</text>
      <view class="follow-count">共{{ followList.length }}条记录</view>
    </view>

    <!-- 拜访记录列表 -->
    <scroll-view 
      scroll-y 
      class="follow-list" 
      v-if="followList.length"
      refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <view class="follow-item" v-for="(item, index) in followList" :key="index">
        <view class="follow-header">
          <view class="follow-info">
            <text class="follow-number">第{{ index + 1 }}次跟进</text>
            <text class="follow-date">{{ item.date }} {{ item.time }}</text>
          </view>
          <view class="follow-status" :class="item.status">{{ item.statusText }}</view>
        </view>
        
        <view class="follow-content">
          <!-- 跟进备注内容 -->
          <view class="remark-section">
            <text class="remark-label">跟进备注：</text>
            <text class="remark-content">{{ item.remark || item.description }}</text>
          </view>
          
          <!-- 拜访图片 -->
          <view class="image-section" v-if="item.images && item.images.length > 0">
            <text class="image-label">拜访图片：</text>
            <view class="image-list">
              <image 
                v-for="(img, imgIndex) in item.images" 
                :key="imgIndex"
                :src="img"
                class="follow-image"
                mode="aspectFill"
                @click="previewImage(item.images, imgIndex)"
              />
            </view>
          </view>
          
          <!-- 定位信息 -->
          <view class="location-info" v-if="item.location || item.address">
            <text class="location-label">拜访地点：</text>
            <view class="location-content">
              <view class="location-icon">📍</view>
              <text class="location-text">{{ item.location || item.address }}</text>
            </view>
          </view>
        </view>
        
        <view class="follow-footer">
          <text class="follow-person">跟进人：{{ item.user_name || '未知' }}</text>
          <text class="follow-type">{{ item.typeText || '拜访跟进' }}</text>
        </view>
      </view>
    </scroll-view>

    <!-- 空状态 -->
    <view class="empty" v-else>
      <image src="/static/empty.png" class="empty-img" />
      <text class="empty-text">暂无跟进记录</text>
    </view>

  </view>
</template>

<script>
import { getFollowProjectList } from '@/api/sale/customer.js'

export default {
  data() {
    return {
      refreshing: false,
      
      // 客户信息
      customerId: null,
      customerName: '',
      
      // 拜访记录列表
      followList: []
    }
  },
  onLoad(options) {
    // 获取传入的客户ID和名称
    if (options.id) {
      this.customerId = options.id;
    }
    if (options.customerName) {
      this.customerName = decodeURIComponent(options.customerName);
    }
    
    // 获取跟进记录
    this.fetchFollowList();
  },

  methods: {
    // 获取跟进记录列表
    async fetchFollowList() {
      if (!this.customerId) {
        uni.showToast({ title: '客户ID不能为空', icon: 'none' });
        return;
      }
      
      try {
        const res = await getFollowProjectList({ id: this.customerId });
        console.log('跟进记录接口返回:', res);
        
        if (res.code === 1) {
          // 处理返回的数据
          this.followList = Array.isArray(res.data) ? res.data.map(item => {
            return {
              id: item.id,
              date: item.createtime ? item.createtime.split(' ')[0] : '',
              time: item.createtime ? item.createtime.split(' ')[1] : '',
              remark: item.remark || '',
              status: 'success',
              statusText: '已跟进',
              user_name: item.user_name || '未知', // 使用接口返回的user_name
              images: item.image ? (item.image.includes('http') ? [item.image] : []) : [],
              location: item.address || '',
              typeText: item.type_ofVisit_name || (item.type_ofVisit === 1 ? '线上' : '线下'),
              action: item.action || '跟进'
            };
          }) : [];
        } else {
          uni.showToast({ title: res.msg || '获取跟进记录失败', icon: 'none' });
          this.followList = [];
        }
      } catch (error) {
        console.log('获取跟进记录失败', error);
        uni.showToast({ title: '获取跟进记录失败，请重试', icon: 'none' });
        this.followList = [];
      }
    },
    
    // 下拉刷新
    async onRefresh() {
      this.refreshing = true;
      try {
        await this.fetchFollowList();
        uni.showToast({
          title: '刷新成功',
          icon: 'success',
          duration: 1000
        });
      } catch (error) {
        uni.showToast({
          title: '刷新失败',
          icon: 'none',
          duration: 1000
        });
      } finally {
        this.refreshing = false;
      }
    },
    
    // 图片预览
    previewImage(images, current) {
      uni.previewImage({
        urls: images,
        current: current
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.page-content {
  min-height: 100vh;
  background: #f5f6fa;
  padding: 30rpx;
  box-sizing: border-box;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.follow-count {
  font-size: 24rpx;
  color: #666;
  background: #f0f0f0;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

/* 跟进记录列表 */
.follow-list {
  height: calc(100vh - 200rpx);
}

.follow-item {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.follow-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
}

.follow-info {
  flex: 1;
}

.follow-number {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.follow-date {
  font-size: 24rpx;
  color: #999;
  display: block;
}

.follow-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.follow-status.success {
  background: #f0f9ff;
  color: #67c23a;
}

.follow-status.pending {
  background: #fff7e6;
  color: #e6a23c;
}

.follow-status.following {
  background: #e6f7ff;
  color: #409eff;
}

.follow-content {
  margin-bottom: 20rpx;
}

/* 备注内容 */
.remark-section {
  margin-bottom: 20rpx;
}

.remark-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 12rpx;
}

.remark-content {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: block;
}

/* 图片区域 */
.image-section {
  margin-bottom: 20rpx;
}

.image-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 12rpx;
}

.image-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.follow-image {
  width: 120rpx;
  height: 120rpx;
  border-radius: 8rpx;
}

/* 定位信息 */
.location-info {
  margin-bottom: 20rpx;
}

.location-label {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 12rpx;
}

.location-content {
  display: flex;
  align-items: center;
}

.location-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
}

.location-text {
  font-size: 28rpx;
  color: #666;
}

.follow-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.follow-person {
  font-size: 24rpx;
  color: #999;
}

.follow-type {
  font-size: 24rpx;
  color: #409eff;
  background: #e6f7ff;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
}

/* 空状态 */
.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 300rpx);
  padding: 100rpx 0;
}

.empty-img {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}
</style>
